import * as echarts from 'echarts'
export default function Drow() {
  //获取Dom节点
  let chartDom = this.$refs.Dom;
  //初始化echarts实例
  let myChart = this.$echarts.init(chartDom);
  //绘制图标
  let option;
  option = {

    backgroundColor: "#1A1835",

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff"
        }

      },
    },
    grid: {
      borderWidth: 0,
      top: 110,
      bottom: 95,
      textStyle: {
        color: "#fff"
      }
    },
    legend: {
      x: '46%',
      top: '11%',
      textStyle: {
        color: '#90979c',
      },
    },
    dataset: [{
      source: this.data,
    }, ],

    calculable: true,
    xAxis: [{
      type: "category",
      axisLine: {
        lineStyle: {
          color: "rgba(204,187,225,0.5)",
        },
      },
      axisLabel: {
        formatter: '{value} :00 ',
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }],

    yAxis: [{
      type: "value",
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: "rgba(204,187,225,0.5)",
        },
      },
      axisLabel: {
        formatter: '{value} °C',
      },

    }],
    dataZoom: [{
      show: true,
      height: 30,
      xAxisIndex: [0],
      bottom: 30,

      "start": 10,
      "end": 80,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
        color: "#5B3AAE",
      },
      textStyle: {
        color: "rgba(204,187,225,0.5)",
      },
      fillerColor: "rgba(67,55,160,0.4)",
      borderColor: "rgba(204,187,225,0.5)",

    }, {
      type: "inside",
      show: true,
      height: 15,
      start: 1,
      end: 35
    }],
    series: [{
      name: "温度",
      type: "line",
      symbolSize: 10,
      symbol: 'circle',
      itemStyle: {
        color: "#c257F6",
      },
      markLine: {
        data: [{
          type: 'average',
          name: 'Avg'
        }]
      },
      markPoint: {
        label: {
          normal: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        data: [{
          type: 'max',
          name: '最大值',

        }, {
          type: 'min',
          name: '最小值'
        }]
      },
    }, ],
  }
  option && myChart.setOption(option);
};
